<template>
  <el-card>
    <div slot="header">
      <span>{{ isEdit ? '编辑广告位' : '添加广告位' }}</span>
    </div>
    <el-form
    :model="form"
    label-width="120px"
    :rules="rules"
    ref="form">
      <el-form-item label="广告位名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
        type="primary"
        @click="onSubmit">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getSaveOrUpdateAdvertspace, getSpaceById } from '@/services/advert-space'

export default {
  name: 'create-or-edit',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    spaceId: {
      type: [String, Number]
    }
  },
  data () {
    return {
      form: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入广告位名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交按钮
    async onSubmit () {
      await this.$refs.form.validate((valid) => {
        if (valid) {
          const { data } = getSaveOrUpdateAdvertspace(this.form)
          if (data.state === 1) {
            this.$message.success('添加成功')
            this.$router.push({
              name: 'advert-space'
            })
          }
        } else {
          return false
        }
      })
    },
    // 重置按钮
    resetForm () {
      this.$refs.form.resetFields()
    },
    async editAdvertSpace () {
      const ID = this.$route.params.spaceId
      const { data } = await getSpaceById(ID)
      console.log(data)
    }
  },
  created () {
    if (this.isEdit) {
      this.editAdvertSpace()
    }
  }
}
</script>

<style lang='scss' scoped></style>
